<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="x-ua-compatible" content="IE=8" />
	<title>Edit area</title>
	<base href="/"/>

<style type="text/css">
body{
	margin:0;
	background-color: #ffffff;
	margin:3px;
	font-family: Arial, Verdana, sans-serif;
	font-size: 12px;
}

a[href]{
	color: -moz-hyperlinktext !important;		/* For Firefox... mark as important, otherwise it becomes black */
	text-decoration: -moz-anchor-decoration;	/* For Firefox 3, otherwise no underline will be used */
}
pre{
	border: #8b4513 1px solid;
	color: chocolate;
	font-family: Monospace;
	background-color: #eeeeee;
	padding:4px;
	margin:4px;
}
</style>
<script>
// <![CDATA[

window.onload = function (){

	var $ = parent.$;
	if( typeof console == "undefined" ){
		console = parent.console || alert;
	}

	// this kills IE9 and prevents us from doing anything good
	// and we can't test for it "if("designMode" in document)"
	if(!$.browser.msie){
		document.designMode = "On"; 		// Moz, Op, Saf
	}

	// IE likes this since IE6
	document.getElementsByTagName("body")[0].contentEditable = true;	

	$textarea = $(window.frameElement.previousSibling);
	
	if($.browser.mozilla){
		// this fixes a bug whereby an execCommand(inserthtml) must be made before all editing functions are enabled
		try{
			inBetween( 'inserthtml', false, $textarea.hide().val() );
		}catch(e){}
	}
	else {
		document.getElementsByTagName("body")[0].innerHTML = $textarea.hide().val();	
	}
	// Set body to the height of the iframe, this is so that in IE we can click anywhere in the iframe to start editing.
	if( $.browser.msie )
		$(document.getElementsByTagName("body")[0]).height( $(window.frameElement).innerHeight()-10);
	
	$(document).bind("click keyup blur", function(e){

		parent.$currentiframe = $(window)[0];
//		console.log(document.getElementsByTagName("body")[0].innerHTML);
		$textarea.val(document.getElementsByTagName("body")[0].innerHTML);
		

		if(e.type==="blur")
			return;

		var obj;

		if(!(obj = $.selectedText(window).obj))
			return;



		// loop through each parent of the currently selected
		// Capture styles and tagNames to imply formatting
		// Formatting of some tags, i.e b,i,u, can be overridden by styles
		// And can also be inferred by tagNames.

		var c = {}; // commands, these are 

		var attr = {
			bold 		: {css:{"fontWeight":"bold"}, tag:"B|STRONG"},
			italic		: {css:{"fontStyle":"italic"},tag:"I|EM"},
			underline	: {css:{"textDecoration":"underline"},tag:"U"},
			strikethrough : {css:{"textDecoration":"line-through"},tag:"STRIKE"},
			justifyright : {css:{"textAlign":"right"},attr:{"align":"right"}},
			justifycenter : {css:{"textAlign":"center"}},attr:{"align":"center"},
			justifyfull : {css:{"textAlign":"justify"}},
			justifyleft : {css:{"textAlign":"left"},attr:{"align":"left"}},
			insertorderedlist : {tag:"OL"},
			createlink : {tag:"A"},
			insertimage : {tag:"IMG"},
			insertunorderedlist : {tag:"UL"},
			fontname	: {css:{"fontFamily":null}, attr:{"face":null}},// null: accepts a variety of values
			formatblock : {tag:"ADDRESS|P|PRE|H[0-9]|BLOCKQUOTE"}
		};
		var getattr = function(){
			if(!this.tagName)
				return;
			var t = this.tagName.toUpperCase(),
				x,y,m;
		

			if(t==="BODY"||t==="HTML")
				return;

			for(x in attr){
				if(c[x]) continue;
				for( y in attr[x].css ){
					if( this.style[y] === attr[x].css[y] 
						|| ( attr[x].css[y] === null && this.style[y].length > 0 ) ){
						c[x] = this.style[y];
						continue;
					}
				}
				if($.browser.msie)
					for( y in attr[x].attr ){
						if( this.getAttribute 
							&& ( this.getAttribute(y) === attr[x].attr[y] 
								|| ( attr[x].attr[y] === null && this.getAttribute(y).length > 0 ) ) ){
							c[x] = this.getAttribute(y);
							continue;
						}
					}
				if(c[x]) continue;
				if((m=t.match( "^("+attr[x].tag+")$" ))!==null){
					c[x] = m[0].toLowerCase();
				}
			}
		};

		$(obj).each(getattr).parents().each(getattr);

///		console.log(["selected",obj,c]);

		$(window.frameElement).siblings("div.toolbar").find(":input[cmd]").each(function(){
			var cmd = $(this).attr("cmd");
			var bool = !(typeof c[cmd] === "undefined");

			if(this.tagName === "BUTTON"){
				if(bool)
					$(this).addClass("selected");
				else
					$(this).removeClass("selected");
			};
			if(this.tagName === "SELECT"){
				if(bool)
					this.value = c[cmd];
				else 
					this.selectedIndex = -1;
			};
			
		});

		//console.log(c,obj,$(obj).parents());
			
		// Record the last selected position in the Iframe
		try{
			var s = document.selection.createRange().duplicate().getBoundingClientRect();
			window.posx = s.left; 
			window.posy = s.top; 
		}
		catch(e){}
	});
	/**/
};

function inBetween(c,b,v) {
	return document.execCommand(c,b,v);
};

// ]]>
</script>
</head>
<body id="editable">
</body>
</html>